<%@ page language="java" contentType="text/html; charset=US-ASCII"
    pageEncoding="US-ASCII"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<h2></h2>
<div id="userDetails-alert-container"></div>
<div class="row">
	<div class="col-md-8">
		<div class="panel panel-default">
			<div class="panel-heading">
			       <i class="fa fa-users fa-fw"></i>Users
			       <div class="pull-right">
	                   <div class="btn-group">
	                       <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
	                           Actions
	                           <span class="caret"></span>
	                       </button>
	                       <ul class="dropdown-menu pull-right" role="menu">
	                           <li><a  id="addNewUser"><i class="fa fa-plus fa-fw"></i>Add</a></li>
	                           <li><a  id="deleteUser"><i class="fa fa-times fa-fw"></i>Delete</a></li>
	                       </ul>
	                  </div>
               </div>
			</div>
			<div class="panel-body">
				<div class="table-responsive">
		     		 <table class="table table-striped table-bordered table-hover" id="users-table-list">
		     		 	<thead>
				            <tr>
				            	<th>id</th>
				                <th>Username</th>
				                <th>Admin</th>
				                <th>Groups</th>
				            </tr>
				        </thead>
		       		 </table>
	   			</div>
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				       <i class="fa fa-user fa-fw"></i>Users Details
			</div>
			<div class="panel-body">
				
				<form role="form" id="usersDetailsForm">
					<button type="button" id="userDetailsSave" class="btn pull-right btn-primary">Save</button>
					<br>
		    		<div class="form-group">
                        <label>UserName:</label>
                         <input id="userId"  type="hidden" class="form-control"/>
                        <input id="username"  class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Password:</label>    
                        <input id="password"  type="password" class="form-control" />
                    </div>
                    <div class="form-group">
 							<label>Admin:</label>    
	                        <select id="admin"  class="form-control">
	                   		 	<option>false</option>
	          	            	<option>true</option>
	           	          
	             	    	 </select>
                    		
                    
                    </div>
                    <div class="form-group">
		                   <div class="row">
		                   		<div class="col-md-6">
		                   		<div class="table-responsive">
		     		 				<table class="table table-striped table-bordered table-hover" id="server-table-list">
						     		 	<thead>
								            <tr>
								            	<th>Server Name</th>
								           </tr>
								        </thead>
						       		 </table>
					   			</div>
		                   		
		                   		</div>
		                   		<div class="col-md-1">
		                   			<button type="button" class="btn btn-primary btn-lg" id="addServerToGroupBtn">
									  <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> 
									</button>
		                   		</div>
		                   		<div class="col-md-5">
		                   			<label>Groups:</label>    
				                    <textarea id="groups"  class="form-control"  rows="10"></textarea>
				                    <p class="help-block"> This will be Regular Expression match, Separated by Comma(,) . For Example. TEST_(.*) will match TEST_M1, TEST_M2, TEST_Server01, TEST_Server02 etc</p>
		                   		</div>
		                   </div>
		                   
                        
                    </div>
                    
				
				
		    	</form>
			</div>
		</div> 
	</div>
	<div class="col-md-4">
		<div class="panel panel-default">
			<div class="panel-heading">
			       <i class="fa fa-wrench fa-fw"></i>Ldap Configuration
			</div>
			<div class="panel-body">
				<button type="button" id="ldapSave" class="btn pull-right btn-primary">Save</button>
		    	<br>
		    	<form role="form" id="ldapDetailsForm">
		    		<div class="form-group">
                        <label>LDAP Hostnme:</label>
                         <input id="ldapId"  type="hidden" class="form-control"/>
                        <input id="ldapHostname"  class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>LDAP Port:</label>
                        <input id="ldapPort"  class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Base Dn:</label>
                        <input id="ldapBaseDn"  class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>User Dn:</label>
                        <input id="ldapUserDn"  class="form-control" />
                    </div>
		    	</form>
		    	
			</div>
		</div>
	</div>
</div>
<script>
    $(document).ready(function() {
        var usersData=uft.getUsersData();
        var ldapConfig=uft.getLdapConfig();
        var usersTable= $('#users-table-list').dataTable( {
	        data: usersData,
	        columns: [
	        	{ data: "userId" ,"visible": false,},
	            { data: "username" },
	            { data: "admin" },        
	            { data: "groups"}
	        ]
    	});
    	var serverTableList= $('#server-table-list').dataTable( {
	        data:  uft.serverData,
	        columns: [
	            { data: "servername" }    
	        ]
    	});
    	if(ldapConfig != null){
    		dwr.util.setValues(ldapConfig);
    	}
    	
    	
    	$("#addServerToGroupBtn").click(function(){
    		var sName= $("#server-table-list tbody tr.selected").text()
    		console.log(sName)
    		if(!jQuery.isEmptyObject(sName)){	
    			var cGroups= $("#groups").val();
    			if(cGroups == ""){
    				$("#groups").val(sName);
    			}else{
    				if(cGroups.indexOf(sName) == -1){
	    				cGroups=cGroups+","+sName;
	    				$("#groups").val(cGroups);
	    			}else{
	    				$("#userDetails-alert-container").atf_warn_flyover("The Server is already exists in the Groups String", "oops!")
	    			}
    			}
    			
    			
    		}
    	 
    	})
    	 $('#server-table-list tbody').on('click','tr', function () { 
    		if(!$(this).hasClass('selected')){
    			$("#server-table-list tbody tr").removeClass('selected');		
				$(this).addClass('selected');
    		}
    	 });
    	$('#users-table-list tbody').on('click','tr', function () { 
    		if(!$(this).hasClass('selected')){
    			$("#users-table-list tbody tr").removeClass('selected');		
				$(this).addClass('selected');
    			var aPos = usersTable.fnGetPosition(this);
   		    	var aData = usersTable.fnGetData(aPos);
   		    	dwr.util.setValues(aData);
    		}
    	 });
    	 $( "#userDetailsSave" ).click(function(){      	
        	var userData={userId:null, username:null, password:null, admin:null, groups:null}
         	dwr.util.getValues(userData);
        	uft.saveOrUpdateUserDetail(userData,"userDetails-alert-container");
        	usersTable.fnClearTable();
			usersTable.fnAddData(uft.getUsersData());
			usersTable.fnDraw();
			
        	
        });
        $( "#ldapSave" ).click(function(){  
        	var ldapData={ldapId:null, ldapHostname:null,ldapPort:0, ldapBaseDn:null, ldapUserDn:null}
         	dwr.util.getValues(ldapData);
         	console.log(ldapData)
         	uft.saveOrUpdateLdapConfig(ldapData,"userDetails-alert-container");
         	var ldapConfig=uft.getLdapConfig();
         	dwr.util.setValues(ldapConfig);
        });
        
        $( "#addNewUser" ).click(function(){
        	var userData={userId:"", username:"", password:"", admin:"false", groups:""}
        	dwr.util.setValues(userData);
        	// add a autofocus to username field
        });
        $( "#deleteUser" ).click(function(){
         	var id =dwr.util.getValue('userId');
         	if ( id != ""){
         		uft.deleteUsersData(parseInt(id),"userDetails-alert-container");
         		
         		var userList=uft.getUsersData()
         		usersTable.fnClearTable()
         		if( userList.length > 0){
         			usersTable.fnAddData(userList);
					usersTable.fnDraw();
         		}

				var userData={userId:"", username:"", password:"", admin:"false", groups:""}
        		dwr.util.setValues(userData);
         	}else{
         		uft.generateAlert("WARN: Oops!. Please select a user to delete", "userDetails-alert-container");
         		
         	}
         	
         })
        
         
     });
 </script>